ScMobileApp.MaincontentController = Ember.Controller.extend({
    pageInit: function(view) {
        this.view = view;
        this.eventBind();


        var data = {
            "body": [
                {"name": "http://resources.shopstyle.com/static/mobile/image2-iPad/womens-clothes.png"},
                {"name": "http://resources.shopstyle.com/static/mobile/image2-iPad/womens-shoes.png"},
                {"name": "http://resources.shopstyle.com/static/mobile/image2-iPad/handbags.png"},
                {"name": "http://resources.shopstyle.com/static/mobile/image2-iPad/womens-accessories.png"}
            ]
        };
        this.dataBind(data);

        //
        //this.getData();
    },
    eventBind: function(){
        this.view.$().on("click", ".category-thumb", $.proxy(function(e){
            var target = $(e.currentTarget),
                index = target.data("index");

            this.nextMove(index);
        }, this));
    },
    nextMove: function(index){
        /*
        this.transitionToRoute('item', {
            item_id: index
        });
        */

        this.transitionToRouteAnimated('a', {main: 'slideLeft'});
    },
    getData: function(){
        DataService.request("IF-002", { })
        .done($.proxy(function(data, type, jqXHR){
            this.dataBind(data);
        }, this))
        .fail($.proxy(function(){
            alert("fail");
        }, this));
    },
    dataBind: function(data){
        var html = "",
            data = data.body,
            len = data.length,
            i = 0;


        html = html + '<div class="hbox boxCenter">';
        for(;i<len; i++){
            html = html + '<div class="category-thumb" data-index="' + i + '">';
                html = html + '<div class="thumbnail">';
                    html = html + '<img src="' + data[i].name + '">';
                html = html + '</div>';
                html = html + '<h1 class="title">Clothing</h1>';
                html = html + '<div class="desc">';
                    html = html + 'Denim, Dresses, Intimates, Jackets, Outerwear, Pants &amp; Shorts, Skirts, Sweaters, Swimwear, Tops, Petites, Plus Sizes, Maternity, Teens';
                html = html + '</div>';
            html = html + '</div>';
        }
        html = html + '</div>';

        html = html + '<div class="hbox boxCenter">';
        for(i=0;i<len; i++){
            html = html + '<div class="category-thumb" data-index="' + i + '">';
                html = html + '<div class="thumbnail">';
                    html = html + '<img src="' + data[i].name + '">';
                html = html + '</div>';
                html = html + '<h1 class="title">Clothing</h1>';
                html = html + '<div class="desc">';
                    html = html + 'Denim, Dresses, Intimates, Jackets, Outerwear, Pants &amp; Shorts, Skirts, Sweaters, Swimwear, Tops, Petites, Plus Sizes, Maternity, Teens';
                html = html + '</div>';
            html = html + '</div>';
        }
        html = html + '</div>';

        this.view.$().html(html);
    }
});
